<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="配载单号" prop="loadNo">
            <el-input
              class="show"
              maxlength="20"
              v-model="queryParams.loadNo"
              placeholder="请输入运输配载单"
              clearable
              @keyup.enter.native="handleQuery"
              @input="onInput($event)"
            />
          </el-form-item>
          <el-form-item label="运输单号" prop="toNo">
            <el-input
              maxlength="20"
              v-model="queryParams.toNo"
              placeholder="请输入运输配载单"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="发货方名称" prop="deliverName">
            <el-input
              maxlength="20"
              v-model="queryParams.deliverName"
              placeholder="请输入发货方名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="要求提货时间" prop="deliverRequireTime">
            <el-date-picker
              style="width: 230px"
              v-model="queryParams.deliverRequireTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              value-format="yyyy-MM-dd"
              @keyup.enter.native="handleQuery"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="要求到货时间" prop="arrivalRequireTime">
            <el-date-picker
              style="width: 230px"
              v-model="queryParams.arrivalRequireTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              value-format="yyyy-MM-dd"
              @keyup.enter.native="handleQuery"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: 20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['tms:transportBill:add']"
          >单条新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleIn"
          v-hasPermi="['tms:transportBill:import']"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['tms:transportBill:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleExport"
          v-hasPermi="['tms:transportBill:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      :border="true"
      v-loading="loading"
      :data="transportBillList"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="编号" prop="id" width="50" align="center" />
      <el-table-column
        label="配载单号(TM)"
        width="110"
        align="center"
        prop="loadNo"
      />
      <el-table-column
        label="运输单号(TO)"
        width="130"
        align="center"
        prop="toNo"
      />
      <el-table-column label="车辆类型" align="center" prop="carType" />
      <el-table-column label="总重量" align="center" prop="totalWeight" />
      <el-table-column label="总体积" align="center" prop="totalVolume" />
      <el-table-column
        label="包裹个数"
        width="75"
        align="center"
        prop="packagesNum"
      />
      <el-table-column
        label="发货方名称"
        width="180"
        align="center"
        prop="deliverName"
      />
      <el-table-column
        label="发货地址"
        width="180"
        align="center"
        prop="deliverAddress"
      />
      <el-table-column
        label="收货方名称"
        width="180"
        align="center"
        prop="arrivalName"
      />
      <el-table-column
        label="收货地址"
        width="180"
        align="center"
        prop="arrivalAddress"
      />
      <el-table-column
        label="要求提货时间"
        width="145"
        align="center"
        prop="deliverTime"
      />
      <el-table-column
        label="要求到货时间"
        width="145"
        align="center"
        prop="arrivalTime"
      />
      <el-table-column
        label="操作时间"
        width="160"
        align="center"
        prop="updateTime"
      />
      <el-table-column label="操作人" align="center" prop="updateBy" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        class-name="small-padding fixed-width"
        width="110"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['tms:transportBill:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['tms:transportBill:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改运输配载单对话框 -->
    <el-dialog
      @close="closeDialog"
      :title="title"
      :visible.sync="open"
      width="850px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="配载单号(TM)" prop="loadNo">
              <el-input
                maxlength="20"
                v-model="form.loadNo"
                placeholder="请输入配载单号"
              />
            </el-form-item>
            <el-form-item label="服务类型" prop="serviceType">
              <el-input
                maxlength="20"
                v-model="form.serviceType"
                placeholder="请输入服务类型"
              />
            </el-form-item>
            <el-form-item label="总体积" prop="totalVolume">
              <el-input
                maxlength="20"
                v-model="form.totalVolume"
                placeholder="请输入总体积"
              />
            </el-form-item>
            <el-form-item label="包裹个数" prop="packagesNum">
              <el-input
                maxlength="20"
                v-model="form.packagesNum"
                placeholder="请输入包裹个数"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运输单号(TO)" prop="toNo">
              <el-input
                maxlength="20"
                v-model="form.toNo"
                placeholder="请输入运输单号"
              />
            </el-form-item>
            <el-form-item label="车辆类型" prop="carType">
              <el-input
                maxlength="20"
                v-model="form.carType"
                placeholder="请输入车辆类型"
              />
            </el-form-item>
            <el-form-item label="总重量" prop="totalWeight">
              <el-input
                maxlength="20"
                v-model="form.totalWeight"
                placeholder="请输入总重量"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发货点" prop="deliverPoint">
              <el-input
                maxlength="50"
                v-model="form.deliverPoint"
                placeholder="请输入发货点"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货方名称" prop="deliverName">
              <el-input
                maxlength="50"
                v-model="form.deliverName"
                placeholder="请输入发货方名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货方要求到达时间" prop="deliverRequireTime">
              <el-date-picker
                style="width: 255px"
                v-model="form.deliverRequireTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货方要求离开时间" prop="deliverLeaveTime">
              <el-date-picker
                style="width: 255px"
                v-model="form.deliverLeaveTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="发货方地址" prop="deliverAddress">
            <el-input
              maxlength="200"
              v-model="form.deliverAddress"
              placeholder="请输入发货方地址"
            />
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收货点" prop="arrivalPoint">
              <el-input
                maxlength="50"
                v-model="form.arrivalPoint"
                placeholder="请输入收货点"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货方名称" prop="arrivalName">
              <el-input
                maxlength="50"
                v-model="form.arrivalName"
                placeholder="请输入收货方名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货方要求到达时间" prop="arrivalRequireTime">
              <el-date-picker
                style="width: 255px"
                v-model="form.arrivalRequireTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货方要求离开时间" prop="arrivalLeaveTime">
              <el-date-picker
                style="width: 255px"
                v-model="form.arrivalLeaveTime"
                type="datetime"
                placeholder="选择日期时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="收货方地址" prop="arrivalAddress">
              <el-input
                maxlength="200"
                v-model="form.arrivalAddress"
                placeholder="请输入发货方地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            maxlength="500"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!--
            action:必选参数，上传的地址
            multiple:是否支持多选文件
            on-preview：点击文件列表中已上传文件时的钩子
            on-remove：文件列表移除文件时的钩子
            before-remove：文件删除之前的钩子
            on-exceed：文件超出个数限制时的钩子
            http-request:覆盖默认的上传行为
           -->
        <el-form-item label="附件" prop="appendixUrl">
          <!-- :on-preview="handlePreview" -->
          <el-upload
            style="width: 300px"
            class="upload-demo"
            multiple
            action="#"
            v-loading="huanchong"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :http-request="uploadFile"
            accept=".pdf,.xlsx,.xls"
            :limit="2"
            :on-exceed="handleExceed"
            :before-upload="checkFileType"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="color: red">
              只能上传xlsx/pdf/xls文件，且不超过500kb
            </div>
          </el-upload>
          <el-row>
            <el-button type="primary" v-if="checkAttachment" @click="check">
              查看附件
            </el-button>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看附件对话框 -->
    <el-dialog title="查看附件" width="600px" :visible.sync="openCheck">
      <div class="cancer">
        <ul>
          <li class="checkLi" v-for="(item, index) in fileList" :key="index">
            {{ item.name }}
            <el-link
              style="margin-left: 20px"
              :href="item.urlName"
              type="primary"
              target="_blank"
            >
              查看<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </li>
        </ul>
      </div>
      <div class="close">
        <el-button @click="close" type="primary">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 显示导入配载单 -->
    <el-dialog
      @close="closeDialog"
      title="导入配载单"
      width="1500px"
      :visible.sync="previewDialog"
      :fullscreen="fullscreenFlag"
    >
      <i
        class="el-icon-copy-document fullScreenIcon"
        v-if="fullscreenFlag"
        @click="fullSreenFn(false)"
      ></i>
      <i
        class="el-icon-full-screen fullScreenIcon"
        v-else
        @click="fullSreenFn(true)"
      ></i>
      <el-row>
        <div>
          <span>配载单附件：</span>
          <!-- :on-preview="handlePreview" -->
          <span>
            <el-upload
              v-loading="huanchong"
              style="
                width: 300px;
                margin-top: -25px;
                margin-left: 100px;
                padding-bottom: 20px;
              "
              class="upload-demo"
              multiple
              action="#"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="tishi"
              :file-list="billList"
              :http-request="uploadBill"
              accept=".pdf"
              :before-upload="checkFileType"
            >
              <el-button size="small">点击上传</el-button>
              <span slot="tip" class="el-upload__tip" style="color: red">
                (仅支持pdf的附件，一次最多上传一张)
              </span>
            </el-upload>
          </span>
        </div>
      </el-row>
      <el-row style="padding-bottom: 20px">
        <el-button type="primary" @click="addRow">新增行</el-button>
        <el-button type="primary" :disabled="del" @click="deleteRow"
          >删除行</el-button
        >
      </el-row>
      <el-table
        :header-cell-style="{ background: '#ADA9A9', color: '#000' }"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        :data="billListIn"
        :border="true"
        @cell-mouse-enter="handleCellEnter"
        @cell-mouse-leave="handleCellLeave"
        @selection-change="handleChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号"  prop="id" width="55" align="center" />
        <el-table-column
          label="发货方"
          align="center"
          width="300"
          prop="deliverName"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.deliverName"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="收货方"
          width="300"
          align="center"
          prop="arrivalName"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.arrivalName"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发货点" align="center" prop="deliverPoint">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.deliverPoint"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="到货点" align="center" prop="arrivalPoint">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.arrivalPoint"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="服务类型" align="center" prop="serviceType">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.serviceType"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="配载单号(TM)"
          width="200"
          align="center"
          prop="loadNo"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.loadNo"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="运输单号(TO)"
          width="200"
          align="center"
          prop="toNo"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.toNo"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="车型" align="center" prop="carType">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.carType"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总重量" align="center" prop="totalWeight">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.totalWeight"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总体积" align="center" prop="totalVolume">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.totalVolume"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="包裹个数" align="center" prop="packagesNum">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.packagesNum"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="发货地址"
          width="300"
          align="center"
          prop="deliverAddress"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.deliverAddress"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="收货地址"
          width="300"
          align="center"
          prop="arrivalAddress"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.arrivalAddress"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="发货方要求提货时间"
          align="center"
          prop="deliverRequireTime"
          width="180"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.deliverRequireTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          label="发货方要求离开时间"
          align="center"
          prop="deliverLeaveTime"
          width="180"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.deliverLeaveTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          label="收货方要求到货时间"
          align="center"
          prop="arrivalRequireTime"
          width="180"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.arrivalRequireTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          label="收货方要求离开时间"
          align="center"
          prop="arrivalLeaveTime"
          width="180"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.arrivalLeaveTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="foot">
        <el-button type="primary" @click="handleBill">保存</el-button>
        <el-button @click="previewDialog = false">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTransportBill,
  getTransportBill,
  delTransportBill,
  addTransportBill,
  updateTransportBill,
  transportBillIn,
  saveBill,
  fileBang,
} from "@/api/tms/transportBill";
import * as qiniu from "qiniu-js";
import { getQnToken } from "@/api/system/user";
export default {
  name: "TransportBill",
  components: {},
  data() {
    return {
      // 显示缓冲状态
      huanchong: false,
      fullscreenFlag: false,
      // 查看数据
      // 是否显示查看附件按钮
      checkAttachment: false,
      previewDialog: false,
      url: "",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      id: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      delSingle: true,
      del: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 运输配载单表格数据
      transportBillList: [],
      // 导入配载单表格数据
      billListIn: [],
      // 导入配载单
      billList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openCheck: false,
      fileList: [],
      previewVisible: false,
      previewPath: "",
      // 存储七牛云token
      qnData: {},
      // 弹框隐藏
      viewVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        loadNo: null,
        serviceType: null,
        carType: null,
        deliverPoint: null,
        deliverName: null,
        deliverCode: null,
        deliverAddress: null,
        deliverRequireTime: [],
        deliverRequireStartTime: "",
        deliverRequireEndTime: "",
        arrivalRequireTime: [],
        arrivalRequireStartTime: "",
        arrivalRequireEndTime: "",
        deliverLeaveTime: null,
        totalWeight: null,
        totalVolume: null,
        packagesNum: null,
        requirement: null,
        arrivalPoint: null,
        arrivalName: null,
        arrivalCode: null,
        arrivalAddress: null,
        deleted: null,
        appendixUrl: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        loadNo: [
          { required: true, message: "运输配载单不能为空", trigger: "blur" },
        ],
        toNo: [
          { required: true, message: "运输单号不能为空", trigger: "blur" },
        ],
        serviceType: [
          { required: true, message: "服务类型不能为空", trigger: "change" },
        ],
        carType: [
          { required: true, message: "车辆类型不能为空", trigger: "change" },
        ],
        deliverPoint: [
          { required: true, message: "发货点不能为空", trigger: "blur" },
        ],
        deliverName: [
          { required: true, message: "发货方名称不能为空", trigger: "blur" },
        ],
        deliverCode: [
          { required: true, message: "发货方代码不能为空", trigger: "blur" },
        ],
        deliverAddress: [
          { required: true, message: "发货方地址不能为空", trigger: "blur" },
        ],
        deliverRequireTime: [
          {
            required: true,
            message: "发货方要求到达时间不能为空",
            trigger: "blur",
          },
        ],
        deliverLeaveTime: [
          {
            required: true,
            message: "发货方要求离开时间不能为空",
            trigger: "blur",
          },
        ],
        totalWeight: [
          { required: true, message: "总重量不能为空", trigger: "blur" },
        ],
        totalVolume: [
          { required: true, message: "总体积不能为空", trigger: "blur" },
        ],
        packagesNum: [
          { required: true, message: "包裹个数不能为空", trigger: "blur" },
        ],
        arrivalPoint: [
          { required: true, message: "到货点不能为空", trigger: "blur" },
        ],
        arrivalName: [
          { required: true, message: "收货方名称不能为空", trigger: "blur" },
        ],
        arrivalAddress: [
          { required: true, message: "到货方地址不能为空", trigger: "blur" },
        ],
        arrivalRequireTime: [
          { required: true, message: "要求到达时间不能为空", trigger: "blur" },
        ],
        arrivalLeaveTime: [
          { required: true, message: "要求离开时间不能为空", trigger: "blur" },
        ],
        createBy: [
          { required: true, message: "创建者不能为空", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" },
        ],
        updateBy: [
          { required: true, message: "更新者不能为空", trigger: "blur" },
        ],
        updateTime: [
          { required: true, message: "更新时间不能为空", trigger: "blur" },
        ],
        appendixUrl: [
          { required: true, message: "附件不能为空", trigger: "blur" },
        ],
      },
      fileName: "",
      fileUrl: "",
      billName: [],
      urlKey: [],
      delRow: [],
      billIn: [],
    };
  },
  created() {
    this.getList();
  },
  watch: {
    "queryParams.arrivalRequireTime"(newVal) {
      // console.log(newVal);
      if (newVal == null) {
        this.queryParams.arrivalRequireTime = [];
      }
    },
    "queryParams.deliverRequireTime"(newVal) {
      // console.log(newVal);
      if (newVal == null) {
        this.queryParams.deliverRequireTime = [];
      }
    },
  },
  methods: {
    async onInput(e){
      this.$forceUpdate();
    },
    // 表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    // 限制上传图片类型
    checkFileType(file) {
      let fileSize = file.size / 1024;
      if (fileSize > 500) {
        this.$message.error("上传文件不能超过500KB!");
        this.fileList = [];
        return false;
      }
    },
    close() {
      this.openCheck = false;
    },
    closeDialog() {
      this.fileList = [];
      this.checkAttachment = false;
      this.billList = [];
      this.billListIn = [];
    },
    // 导入数据
    handleIn() {
      this.previewDialog = true;
    },
    // 鼠标移入table
    handleCellEnter(row, column, cell, event) {
      row.isEdit = true;
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell, event) {
      row.isEdit = false;
    },
    //
    handleBill() {
      let list = [];
      for (let i = 0; i < this.billList.length; i++) {
        list.push(this.billList[i].urlName);
        this.billListIn.forEach((value, index, array) => {
          value.appendixUrl = list + "";
        });
      }
      let params = {
        saveTransportBills: this.billListIn,
      };
      saveBill(params).then((res) => {
        if (res.code == 200) {
          this.previewDialog = false;
          this.getList();
          this.$message.success("导入成功！");
        }
      });
    },
    // 导入文件
    async uploadBill(uploadInfo) {
      // 从后端获取到的token的值
      let response = await this.getQnToken();
      if (response.code == 200) {
        this.qnData.token = response.data.token;
        let config = {
          useCdnDomain: true,
          region: qiniu.region.z0,
        };
        let putExtra = {
          fname: "",
          params: {},
          mimeType: null,
        };
        var observable = qiniu.upload(
          uploadInfo.file,
          response.data.qiniuKey,
          this.qnData.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (res) => {
            if (res.total.percent != 100) {
              this.huanchong = true;
            } else {
              this.huanchong = false;
            }
          },
          complete: (result) => {
            let avatar = `http://img.mofankj.com/${result.key}`;
            let data = {
              avatar,
            };
            this.billList.push({
              name: uploadInfo.file.name,
              url: data.avatar,
              urlName: result.key,
            });
            let params = {};
            for (let i = 0; i < this.billList.length; i++) {
              params.url = this.billList[i].url;
            }
            // 获取需要上传的导入的数据
            transportBillIn(params.url).then((res) => {
              if (res.data.length <= 0) {
                this.$message.error(
                  "您上传的配载单未解析到数据或格式有误,请检查!"
                );
              }
              this.billListIn = res.data;
              for (let i = 0; i < this.billListIn.length; i++) {
                this.billListIn[i].id = i+1;
              }
                console.log(this.billListIn);
            });
            let qiniuyun = {
              key: result.key,
              fileName: uploadInfo.file.name,
            };
            fileBang(qiniuyun).then((res) => {
              // (this.fileName = res.fileName), (this.filUrl = res.key);
            });
          },
        });
      }
    },
    /** 获取七牛云token */
    getQnToken() {
      return new Promise((resolve, reject) => {
        getQnToken().then((response) => {
          resolve(response);
        });
      });
    },
    // 上传文件
    async uploadFile(uploadInfo) {
      // 从后端获取到的token的值
      let response = await this.getQnToken();
      if (response.code == 200) {
        this.qnData.token = response.data.token;
        let config = {
          useCdnDomain: true,
          region: qiniu.region.z0,
        };
        let putExtra = {
          fname: "",
          params: {},
          mimeType: null,
        };
        var observable = qiniu.upload(
          uploadInfo.file,
          response.data.qiniuKey,
          this.qnData.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (res) => {
            if (res.total.percent != 100) {
              this.huanchong = true;
            } else {
              this.huanchong = false;
            }
          },
          complete: (result) => {
            let avatar = `${result.key}`;
            let data = {
              avatar,
            };
            this.fileName = uploadInfo.file.name;
            this.fileUrl = data.avatar;
            this.fileList.push({
              name: this.fileName,
              url: this.fileUrl,
            });
            let params = {
              key: data.avatar,
              fileName: uploadInfo.file.name,
            };
            fileBang(params).then((res) => {
              (this.fileName = res.fileName), (this.filUrl = res.key);
            });
          },
        });
      }
    },
    // // 点击上传文件
    // handlePreview(file) {
    //   this.previewDialog = true;
    // },
    // 移除文件
    handleRemove(file) {
      // 上传
      this.fileList.forEach((value, index, array) => {
        if (file.url == value.url) {
          array.splice(index, 1);
        }
      });
      // 导入
      this.billList.forEach((value, index, array) => {
        if (file.uid == value.uid) {
          array.splice(index, 1);
        }
      });
    },
    // 文件超限时的提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 2 个文件`);
    },
    tishi() {
      this.$message.warning("当前限制选择 1 个文件");
    },
    // 移除文件时的提示
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getGoodsList(data) {
      listTransportBill(data).then((response) => {
        this.transportBillList = response.rows;
        this.transportBillList.map((value) => {
          let arrivalTime = `${value.arrivalRequireTime}~${value.arrivalLeaveTime}`;
          let deliverTime = `${value.deliverRequireTime}~${value.deliverLeaveTime}`;
          value.arrivalTime = arrivalTime;
          value.deliverTime = deliverTime;
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询运输配载单列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.deliverRequireTime.length > 0 ||this.queryParams.arrivalRequireTime.length > 0) {
        let data = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          loadNo: this.queryParams.loadNo,
          toNo: this.queryParams.toNo,
          deliverName: this.queryParams.deliverName,
          deliverRequireStartTime: `${this.queryParams.deliverRequireTime[0]} 00:00:00`,
          deliverRequireEndTime: `${this.queryParams.deliverRequireTime[1]} 23:59:59`,
          arrivalRequireStartTime: `${this.queryParams.arrivalRequireTime[0]} 00:00:00`,
          arrivalRequireEndTime: `${this.queryParams.arrivalRequireTime[1]} 23:59:59`,
        };
        this.getGoodsList(data);
      } else {
        this.getGoodsList(this.queryParams);
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.fileList = [];
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        loadNo: null,
        serviceType: null,
        carType: null,
        deliverPoint: null,
        deliverName: null,
        deliverCode: null,
        deliverAddress: null,
        deliverRequireTime: null,
        deliverLeaveTime: null,
        totalWeight: null,
        totalVolume: null,
        packagesNum: null,
        requirement: null,
        arrivalPoint: null,
        arrivalName: null,
        arrivalCode: null,
        arrivalAddress: null,
        arrivalRequireTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        deleted: null,
      };
      this.queryParams = {
        deliverRequireStartTime: null,
        deliverRequireEndTime: null,
        arrivalRequireStartTime: null,
        arrivalRequireEndTime: null,
      };
      // this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery(res) {
      console.log(this.queryParams);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      // this.reset();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      // console.log(this.ids);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加运输配载单";
    },
    // 查看附件按钮
    check() {
      console.log(1111,this.fileList);
      this.openCheck = true;
    },
    data(e) {
      console.log(e);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getTransportBill(id).then((response) => {
        console.log(response);
        for (let i = 0; i < response.data.appendixUrl.length; i++) {
          this.fileList.push({
            name: response.data.appendixUrl[i].fileName,
            url: response.data.appendixUrl[i].qiniuKey,
            urlName: response.data.appendixUrl[i].fileUrl,
          });
          // this.billListIn
        }
        this.form = response.data;
        // 展示新增弹框
        this.open = true;
        this.checkAttachment = true;
        this.title = "修改运输配载单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      let list = [];
      for (let i = 0; i < this.fileList.length; i++) {
        list.push(this.fileList[i].url);
        this.billName.push(this.fileList[i].name);
        this.form.appendixUrl = list + "";
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateTransportBill(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.fileList = [];
              this.getList();
            });
          } else {
            addTransportBill(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.fileList = [];
              this.checkAttachment = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除运输配载单编号为"' + ids + '"的数据项？')
        .then(function () {
          return delTransportBill(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "tms/transportBill/export",
        {
          ...this.queryParams,
        },
        `transportBill_${new Date().getTime()}.xlsx`
      );
    },
    handleChange(val) {
      this.id = val;
      //  console.log(this.id);
      this.delSingle = val.length !== 1;
      this.del = !val.length;
    },
    // 新增导入行
    addRow() {
      let tabs = JSON.parse(JSON.stringify(this.billListIn));
      if (this.billListIn.length > 0) {
        let id = { id: ++this.billListIn.slice(-1)[0].id };
        tabs.push(id);
        this.billListIn = tabs;
      } else {
        let i = 0;
        tabs.push({ id: i });
        this.billListIn = tabs;
      }
    },
    /** 删除导入项 */
    deleteRow() {
      this.$modal.confirm("是否确认删除已导入的项？").then(() => {
        let set = this.id.map((item) => item.id);
        let resArr = this.billListIn.filter((item) => !set.includes(item.id));
        this.billListIn = resArr;
        this.$message.success("删除成功");
      });
    },
    fullSreenFn(e) {
      this.fullscreenFlag = e;
    },
  },
};
</script>
<style>
.checkLi {
  /* background-color: pink; */
  list-style: none;
  height: 50px;
}
.check {
  text-align: center;
}
.cancer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.cancer div:first-child {
  height: 100%;
  line-height: 5%;
}
.close {
  text-align: right;
}
.el-table .warning-row {
  background: #f7faff;
}
.el-table .success-row {
  background: #ebf1fb;
}
.fullScreenIcon {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}

.fullScreenIcon:hover {
  color: #409eff;
}
.foot {
  text-align: center;
  margin-top: 20px;
}
</style>
